<template>
  <div class="roleSet page-miH page-bgBack">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px">
      <a-input-search v-model="roleName" placeholder="搜索角色名称" allowClear style="width: 200px" @search="checkByRoleName" />
      <div style="display: flex; align-items: center">
        <a-button :disabled="!selectedRowKeys.length" @click="deleteRoles"> 批量删除 </a-button>
        <a-button type="primary" icon="plus" @click="newRole" style="margin-left: 10px"> 新建角色 </a-button>
      </div>
    </div>

    <a-table
      :columns="columns"
      :data-source="defaultRoleList"
      row-key="id"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.reserveFlag,
            name: record.name
          }
        })
      }"
      :loading="tableLoading"
    >
      <template slot="action" slot-scope="text, record">
        <span>
          <a size="mini" type="link" @click="configPermission(record)">配置</a>
          <template v-if="!record.reserveFlag">
            <a-divider type="vertical" />
            <a size="mini" type="link" @click="deleteRoleClick(record)">删除</a>
          </template>
        </span>
      </template>
    </a-table>
    <a-modal v-model="addRoleVisible" title="新建角色" @ok="handleOk">
      <a-form-model ref="ruleForm" :model="dataForm" :rules="editRules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="角色名称" prop="addRoleName">
          <a-input v-model="dataForm.addRoleName" />
        </a-form-model-item>
        <a-form-model-item label="角色描述" prop="addRoleIntro">
          <a-input v-model="dataForm.addRoleIntro" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "角色名称",
    dataIndex: "name",
    align: "center",
    width: 150
  },
  {
    title: "角色描述",
    dataIndex: "description",
    align: "center",
    width: 150
  },
  {
    title: "权限数量",
    dataIndex: "permissionCount",
    align: "center",
    width: 100
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
    fixed: "right",
    width: 150
  }
];
import { addRole, deleteRole, getRoleList, deleteRoles } from "@/api/company/member";
export default {
  data() {
    return {
      actionId: null,
      hrId: null,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      columns,
      activeName: "company",
      addRoleVisible: false,
      isBatch: true,
      roleIds: [],
      roleName: "",
      roleState: "",
      dataForm: {
        addRoleName: "",
        addRoleIntro: ""
      },

      addRoletype: "",
      subjectType: "company",
      state: [
        {
          value: false,
          label: "未启用"
        },
        {
          value: true,
          label: "启用中"
        }
      ],
      roleType: [
        {
          value: "A",
          label: "管理员"
        },
        {
          value: "U",
          label: "普通成员"
        }
      ],
      editRules: {
        addRoleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        addRoleIntro: [{ required: false }]
      },
      selectedRowKeys: [],
      defaultRoleList: [],
      multipleSelection: "",
      tableLoading: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取数据
    getList() {
      var subjectType = {
        subjectType: this.subjectType
      };
      this.tableLoading = true;
      getRoleList()
        .then((res) => {
          this.defaultRoleList = res.data || [];
          const columns = this.columns.map((i) => i.dataIndex);
          this.defaultRoleList = this.defaultRoleList.map((item) => {
            columns.map((key) => {
              if (item[key] === "" || item[key] === null) {
                item[key] = "--";
              }
            });
            return item;
          });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    // 确定
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var addRoleDTO = {
            name: this.dataForm.addRoleName,
            description: this.dataForm.addRoleIntro
            // type: "U",
            // subjectId: "0",
            // subjectType: this.subjectType // 业务id
          };
          addRole(addRoleDTO)
            .then((data) => {
              this.addRoleVisible = false;
              this.getList();
            })
            .catch((err) => {
              console.log("debug log --> ", err);
            });
        } else {
          return false;
        }
      });
    },
    // 查询
    checkByRoleName() {
      var subjectType = {
        name: this.roleName
        // isValid: this.roleState,
        // subjectType: this.subjectType
      };
      getRoleList(subjectType)
        .then((res) => {
          this.defaultRoleList = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    // 重置
    reset() {
      this.roleName = "";
      this.roleState = "";
      getRoleList()
        .then((res) => {
          this.defaultRoleList = res.data;
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    changeRoleType(e) {
      this.addRoleType = e;
    },
    cancel() {
      this.$refs["dataForm"].resetFields();
      this.addRoleVisible = false;
    },
    saveAddRole(formName) {
      var addRoleDTO = {
        name: this.dataForm.addRoleName,
        description: this.dataForm.addRoleIntro,
        valid: this.addRoleState,
        type: "U",
        subjectId: "0",
        subjectType: this.subjectType // 业务id
      };
      addRole(addRoleDTO)
        .then((res) => {
          this.$refs["dataForm"].resetFields();
          this.addRoleVisible = false;
          this.$notification["success"]({
            message: "success",
            description: "新增角色成功"
          });
          var subjectType = {
            subjectType: this.subjectType
          };
          getRoleList()
            .then((res) => {
              this.defaultRoleList = res.data;
            })
            .catch((err) => {
              console.log("debug log --> ", err);
            });
        })
        .catch((err) => {
          console.log("debug log --> ", err);
        });
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      this.roleIds = this.selectedRowKeys;
      if (selectedRowKeys.length > 1) {
        this.isBatch = false;
      } else {
        this.isBatch = true;
      }
    },
    deleteRoleClick(row) {
      // this.roleIds = row.id;
      var that = this;
      this.$confirm({
        title: "删除角色",
        content: "此操作将永久删除该角色, 是否继续?",
        onOk() {
          // var form = new FormData();
          // form.append("roleIds", that.roleIds);
          deleteRole(row.id)
            .then((res) => {
              that.$notification["success"]({
                message: "Success",
                description: "删除成功"
              });
              that.isBatch = true;
              var subjectType = {
                subjectType: that.subjectType
              };
              getRoleList()
                .then((res) => {
                  that.defaultRoleList = res.data;
                })
                .catch((err) => {
                  console.log("debug log --> ", err);
                });
            })
            .catch((err) => {
              console.log("debug log --> ", err);
            });
        },
        onCancel() {}
      });
    },
    deleteRoles() {
      var that = this;
      this.$confirm({
        title: "删除角色",
        content: "此操作将永久删除该角色, 是否继续?",
        onOk() {
          // var form = new FormData();
          // form.append("hrRoleIds", that.selectedRowKeys);
          deleteRoles(that.selectedRowKeys)
            .then((res) => {
              that.$notification["success"]({
                message: "Success",
                description: "删除成功"
              });
              that.selectedRowKeys = [];
              that.isBatch = true;
              var subjectType = {
                subjectType: that.subjectType
              };
              getRoleList()
                .then((res) => {
                  that.defaultRoleList = res.data;
                })
                .catch((err) => {
                  console.log("debug log --> ", err);
                });
            })
            .catch((err) => {
              console.log("debug log --> ", err);
            });
        },
        onCancel() {}
      });
    },

    configPermission(row) {
      if (row.roleVOList) {
        row.roleVOList.forEach((item2, index2) => {
          if (item2.subjectType === "company") {
            this.actionId = item2.id;
          }
          if (item2.subjectType === "hr") {
            this.hrId = item2.id;
          }
        });
      }
      row.subjectType = this.subjectType;
      this.$router.push({
        path: `roleconfig`,
        query: { id: row.id, actionId: this.actionId, hrId: this.hrId }
      });
    },
    newRole() {
      this.addRoleVisible = true;
      this.dataForm.addRoleName = "";
      this.dataForm.addRoleIntro = "";
    }
  }
};
</script>
<style lang="scss" scoped>
.roleSet {
  padding: 24px;
}
</style>
